<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath =
            request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
                    + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8" name="viewport" content="initial-scale=1.0, user-scalable=no">
    <title>编辑失物招领</title>
    <link rel="shortcut icon" href="static/image/logo01.ico"/>
    <link href="static/easyui/themes/default/easyui.css" rel="stylesheet"/>
    <link href="static/easyui/themes/icon.css" rel="stylesheet"/>
    <script type="text/javascript" src="static/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="static/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="static/easyui-lang-zh_CN.js"></script>
</head>
<body class="easyui-layout">
<%
    String noticeId = request.getParameter("id");
%>
<div style="width:50%;">
    <table>
        <tr>
            <td>标题：</td>
            <td>
                <input class="easyui-textbox" type="text" name="title" id="title"/>
            </td>
        </tr>
        <tr>
            <td>内容：</td>
            <td>
                <input class="easyui-textbox" type="text" name="content" id="content"
                       data-options="multiline:true"/>
            </td>
        </tr>
        <tr>
            <td>上传照片：</td>
            <td><input class="easyui-filebox" id="file" name="file" data-options="buttonText:'选择文件'"
                       style="width:300px">
                <br/>
                <label id="fileName"></label>
            </td>
        </tr>
        <tr>
            <td><a href="javascript:void(0)" class="easyui-linkbutton"
                   data-options="iconCls:'icon-ok'"
                   onclick="submit()">提交</a></td>
            <td><a href="javascript:void(0)" class="easyui-linkbutton"
                   data-options="iconCls:'icon-reload'" onclick="reset()">重置</a></td>
        </tr>
    </table>
</div>
<script>
  $(function () {
    // 页面进来加载物品类别下拉条
    // 加载失物招领信息
    $.ajax({
      type: "get",
      url: "notice/get",
      data: {id: "<%=noticeId%>"},
      success: function (response) {
        console.log(response);
        $('#title').textbox('setValue', response.data.title);
        $('#content').textbox('setValue', response.data.content);
      }
    })
  })

  // 用户上传图片事件
  $('#file').filebox({
    'onChange': function (e) {
      // 获取到文件对象
      var file0 = $("#file").filebox("files")[0];
      var formData = new FormData();
      formData.append("file", file0);
      // 将文件直接上传到后台
      $.ajax({
        type: "post",
        url: "fileUpload",
        data: formData,
        processData: false,
        contentType: false,
        success: function (response) {
          // 将文件框的内容设置成为文件名
          $('#fileName').text(response.data);
        }
      })
    }
  })
  // 提交表单
  function submit() {
    var title = $('#title').val();
    var content = $('#content').val();
    var fileName = $('#fileName').text();
    // 提交到后台
    $.ajax({
      url: "notice/update.do",
      type: "post",
      data: {
        "id": "<%=noticeId%>",
        "title": title,
        "content": content,
        "fileName": fileName
      },
      success: function (response) {
        var message = response.message;
        if (response.code == 0) {
          message += ",请关闭后刷新";
        }
        $.messager.show({
          title: '提示',
          msg: message,
          showType: 'show',
          timeout: 1500,
          style: {
            right: '',
            top: document.body.scrollTop + document.documentElement.scrollTop,
            bottom: ''
          }
        });
      }
    });
  }

</script>
</body>
</html>